<div class="pac-story-bar py-2 shrink-0 flex-grow-0 flex flex-col justify-start items-center gap-2 z-20 overflow-hidden hover:overflow-auto transition-all duration-200"
    [class.opened]="sideMenuOpened()"
    >
    <!-- <button mat-icon-button displayDensity="cosy" matTooltip="{{ 'PAC.Story.GlobalFilterBar' | translate: {Default: 'Global Filter Bar'} }}"
        matTooltipPosition="right"
        (click)="toggleGlobalFilterBar()">
        <mat-icon fontSet="material-icons-outlined">filter_alt</mat-icon>
    </button> -->
  @if (story?.access === AccessEnum.Write) {
    @switch (story.status) {
      @case(StoryStatusEnum.RELEASED) {
        <span class="font-notoColorEmoji" matTooltip="{{ 'PAC.Story.Released' | translate: {Default: 'Released'} }}" matTooltipPosition="right">🚀</span>
      }
      @case(StoryStatusEnum.DRAFT) {
        <span class="font-notoColorEmoji" matTooltip="{{ 'PAC.Story.Draft' | translate: {Default: 'Draft'} }}" matTooltipPosition="right">📝</span>
      }
    }
    
    <button mat-icon-button displayDensity="cosy" matTooltip="{{ 'PAC.Story.EditStory' | translate: {Default: 'Edit Story'} }}" matTooltipPosition="right"
        (click)="edit()">
        <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
    </button>
    <!-- <button mat-icon-button displayDensity="cosy" matTooltip="{{ 'PAC.Story.DuplicateStory' | translate: {Default: 'Duplicate Story'} }}" matTooltipPosition="right"
        (click)="copy()">
        <mat-icon fontSet="material-icons-outlined">copy</mat-icon>
    </button> -->
    <button mat-icon-button displayDensity="cosy" matTooltip="{{ 'PAC.Story.DownloadStory' | translate: {Default: 'Download Story'} }}" matTooltipPosition="right"
        (click)="onStoryDownload()">
        <mat-icon fontSet="material-icons-outlined">file_download</mat-icon>
    </button>
  }

    <button mat-icon-button displayDensity="cosy" matTooltip="{{ 'PAC.Story.AutoRefresh' | translate: {Default: 'Auto Refresh'} }}" matTooltipPosition="right"
        [matMenuTriggerFor]="timerMenu">
        <mat-icon fontSet="material-icons-outlined">update</mat-icon>
    </button>

    <mat-divider class="w-full"></mat-divider>

    <button mat-icon-button displayDensity="cosy" (click)="toggleBookmark(story.bookmark)">
        <mat-icon *ngIf="story?.bookmark" fontSet="material-icons-outlined"
            matTooltip="{{ 'PAC.Story.RemoveBookmark' | translate: {Default: 'Remove Bookmark'} }}" matTooltipPosition="right">bookmark</mat-icon>
        <mat-icon *ngIf="!story?.bookmark" fontSet="material-icons-outlined"
            matTooltip="{{ 'PAC.Story.Bookmark' | translate: {Default: 'Bookmark'} }}" matTooltipPosition="right">bookmark_add</mat-icon>
    </button>
    <button mat-icon-button displayDensity="cosy" (click)="openShares(story)">
        <mat-icon fontSet="material-icons-outlined">share</mat-icon>
    </button>

    <button mat-icon-button displayDensity="cosy" (click)="toggleFullscreen()">
      @if (fullscreen) {
        <mat-icon fontSet="material-icons-outlined"
            matTooltip="{{ 'PAC.Story.ExitFullscreen' | translate: {Default: 'Exit Fullscreen'} }}" matTooltipPosition="right">fullscreen_exit</mat-icon>
      } @else {
        <mat-icon fontSet="material-icons-outlined"
            matTooltip="{{ 'PAC.Story.Fullscreen' | translate: {Default: 'Fullscreen'} }}" matTooltipPosition="right">fullscreen</mat-icon>
      }
    </button>

    <button mat-icon-button displayDensity="cosy"
        [color]="(isPanMode$ | async)?'accent':''"
        [matTooltip]="'Story.Toolbar.PanMode' | translate: {Default: 'Pan mode (Space)'}"
        matTooltipPosition="after"
        (click)="togglePanTool()">
        <mat-icon fontSet="material-icons-outlined">pan_tool</mat-icon>
    </button>

    <button mat-icon-button displayDensity="cosy"
        [matTooltip]="'Story.Toolbar.ZoomIn' | translate: {Default: 'Zoom In (+)'}"
        matTooltipPosition="after"
        (click)="zoomIn()">
        <mat-icon fontSet="material-icons-outlined">zoom_in</mat-icon>
    </button>
    <button mat-icon-button displayDensity="cosy"
        [cdkMenuTriggerFor]="scaleMenu"
        [cdkMenuPosition]="[{
            originX: 'end',
            originY: 'center',
            overlayX: 'start',
            overlayY: 'center'
        }]"
        [matTooltip]="scale() ?? ('Story.Toolbar.Scale' | translate: {Default: 'Scale'})"
        matTooltipPosition="after"
    >
        <span class="text-xs">
            {{ scale() }}%
        </span>
    </button>
    <button mat-icon-button displayDensity="cosy"
        [matTooltip]="'Story.Toolbar.ZoomOut' | translate: {Default: 'Zoom Out (-)'}"
        matTooltipPosition="after"
        (click)="zoomOut()">
        <mat-icon fontSet="material-icons-outlined">zoom_out</mat-icon>
    </button>
</div>

<div #storyContainer class="flex-1 w-full h-full relative overflow-hidden">
    <ngm-story #storyComponent tabindex="0" class="w-full h-full overflow-auto"
        [story]="story"
        [pageKey]="pageKey()"
        [widgetKey]="widgetKey()"
        [watermark]="watermark$ | async"
        [dark]="isDark$ | async"
    />

    <ngm-drawer-trigger class="absolute -left-2 top-1/3 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened"
        [matTooltip]="'PAC.Story.StoryToolbar' | translate: {Default: 'Story Toolbar'}"
        matTooltipPosition="after" />
</div>

@if (error) {
    <div class="pac-result w-full">
        <div class="bug font-notoColorEmoji">🐞</div>
        <div class="description">
            {{error}}
        </div>
    </div>
}

@if (showExplorer()) {
    <ngm-story-explorer class="absolute top-0 left-0 w-full h-full z-50"
        cdkDropListGroup
        [data]="explore()"
        (closed)="closeExplorer($event)"
    ></ngm-story-explorer>
}

<mat-menu #timerMenu="matMenu" class="ngm-density__compact mat-color-accent">
    <button mat-menu-item [matMenuTriggerFor]="dataMenu">
        <mat-icon fontSet="material-icons-round" class="shrink-0">autorenew</mat-icon>{{ 'Story.Toolbar.Data' | translate: {Default: 'Data'} }}
    </button>
    <button *ngIf="multiplePages" mat-menu-item [matMenuTriggerFor]="pagesMenu">
        <mat-icon fontSet="material-icons-outlined" class="shrink-0">auto_stories</mat-icon>{{ 'Story.Toolbar.Pages' | translate: {Default: 'Pages'} }}
    </button>
</mat-menu>

<mat-menu #pagesMenu="matMenu" class="ngm-density__compact mat-color-accent">
    <div class="text-xs uppercase px-4 py-2">
        {{ 'Story.Toolbar.AutoPaging' | translate: {Default: 'Auto Paging'} }}
    </div>
    <button mat-menu-item (click)="timerPageDown(null)">
        <mat-icon *ngIf="!pageTimer" class="ngm-density__compact">done</mat-icon> {{ 'PAC.KEY_WORDS.Off' | translate: {Default: 'Off'} }}
    </button>
    <button mat-menu-item *ngFor="let t of Schedulers" (click)="timerPageDown(t)">
        <mat-icon *ngIf="pageTimer===t" class="ngm-density__compact">done</mat-icon>{{t}} {{ 'PAC.KEY_WORDS.Minute' | translate: {Default: 'Minutes'} }}
    </button>
</mat-menu>
<mat-menu #dataMenu="matMenu" class="ngm-density__compact mat-color-accent">
    <div class="text-xs uppercase px-4 py-2">
        {{ 'PAC.KEY_WORDS.AutoRefresh' | translate: {Default: 'Auto Refresh'} }}
    </div>
    <button mat-menu-item (click)="timerUpdate(null)">
        <mat-icon *ngIf="!dataTimer" class="ngm-density__compact">done</mat-icon> {{ 'PAC.KEY_WORDS.Off' | translate: {Default: 'Off'} }}
    </button>
    <button mat-menu-item *ngFor="let t of Schedulers" (click)="timerUpdate(t)">
        <mat-icon *ngIf="dataTimer===t" class="ngm-density__compact">done</mat-icon>{{t}} {{ 'PAC.KEY_WORDS.Minute' | translate: {Default: 'Minutes'} }}
    </button>
</mat-menu>

<ng-template #scaleMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem (click)="resetScalePan()">
            <mat-icon>center_focus_strong</mat-icon>
            <span class="flex-1">
                {{ 'Story.Toolbar.Scale_Unset' | translate: {Default: 'Unset'} }}
            </span>

            <span class="text-sm font-bold ml-4">
                Alt + Esc
            </span>
        </button>
      @for (item of StoryScales; track item.value) {
        <button cdkMenuItem class="pac-story-bar__scale-item group"
            [class.active]="scale() === item.value"
            (click)="setScale(item.value)">
            <span class="pac-story-bar__scale-point inline-flex items-center justify-center w-2 h-2 ml-2 mr-4 text-xs font-semibold bg-gray-200 rounded-full group-hover:bg-yellow-500">
            </span>
            
            <span>{{item.name}}</span>
        </button>
      }
    </div>
</ng-template>